<template>
    <div class="card container">
        <Toast />
        <div class="card flex flex-column  gap-3 panel">
            <h3>参数查询</h3>
        <InputGroup>
            <InputGroupAddon>开始时间</InputGroupAddon>
            <Calendar v-model="store.state.PanelParams.begintime" showIcon iconDisplay="input" inputId="icondisplay" showTime hourFormat="24" />
        </InputGroup>

        <InputGroup>
            <InputGroupAddon>结束时间</InputGroupAddon>
            <Calendar v-model="store.state.PanelParams.endtime" showIcon iconDisplay="input" inputId="icondisplay" showTime hourFormat="24" />
        </InputGroup>

        <Dropdown v-model="store.state.PanelParams.event" :options="cities" showClear optionLabel="name" placeholder="选择事件"
            class="w-full" />

        <InputGroup>
            <InputText placeholder="输入域名" v-model="hostInput" />
            <Button icon="pi pi-check" severity="success" @click="addHost()" />
        </InputGroup>

        <div class="card list">
            <transition-group name="fade" tag="div">
                <InputGroup v-for="(host, index) in store.state.PanelParams.hosts" :key="index" style="margin-bottom: 10px;">
                    <InputGroupAddon style="flex-grow: 1;">{{ host }}</InputGroupAddon>
                    <Button icon="pi pi-times" severity="danger" @click="removeHost(index)" />
                </InputGroup>
            </transition-group>
        </div>

        <Button label="更新" @click="getUserTable()" :loading="store.state.UserTable.loading" />
        </div>
    </div>
</template>

<script setup>
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
import Button from 'primevue/button';
import Calendar from 'primevue/calendar';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { useToast } from "primevue/usetoast";
const toast = useToast();

const store = useStore();
function getUserTable() {
    store.dispatch('getUserTable')
}

// 事件参数
const cities = ref([
    { name: '页面访问', code: 0 },
    { name: '添加line', code: 1 },
]);

// host参数
const hostInput = ref('');

const addHost = () => {
    const newHost = hostInput.value.trim();
    if (newHost && !store.state.PanelParams.hosts.includes(newHost)) {
        store.state.PanelParams.hosts.push(newHost);
        hostInput.value = ''; // 清空输入框
    }else if(store.state.PanelParams.hosts.includes(newHost)){
        toast.add({ severity: 'error', summary: 'Error', detail: '域名已添加', life: 3000 });
    }
};

const removeHost = (index) => {
    store.state.PanelParams.hosts.splice(index, 1); // 移除指定索引的域名
};

</script>

<style scoped>
.container{
    height: 100%;
}

.p-inputgroup-addon {
    justify-content: left;
}

h3 {
    text-align: center;
}

.panel{
    border: 1px solid #e2e8f0;
    height: 100%;
}

.list{
    border: 1px solid #e2e8f0;
    flex-grow: 1;
    overflow-y: auto;
}

/* 定义进入和离开过程的动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

/* 定义进入开始和离开结束时元素的状态 */
.fade-enter, .fade-leave-to /* .fade-leave-active 在 Vue 2 中 */ {
  opacity: 0;
  transform: translateY(-20px); /* 向上移动 20px */
}
</style>